<template>
	<tabbar>
      <tabbar-item :class="this.footerSelect=='index'?'selected':'unselect'" link="/index.html">
        <x-icon v-if="this.footerSelect=='index'" slot="icon" type="ios-home" size="26" class="xicon_link"></x-icon>
        <x-icon v-if="this.footerSelect!='index'" slot="icon" type="ios-home-outline" size="26" class="xicon_link"></x-icon>
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item :class="this.footerSelect=='pub'?'selected':'unselect'"  link="/pub.html">
        <x-icon v-if="this.footerSelect!='pub'" slot="icon" type="ios-paperplane-outline" size="26" class="xicon_link"></x-icon>
        <x-icon v-if="this.footerSelect=='pub'" slot="icon" type="ios-paperplane" size="26" class="xicon_active"></x-icon>
        <span slot="label">发布</span>
      </tabbar-item>
      <tabbar-item :class="this.footerSelect=='my'?'selected':'unselect'"  link="/user/center/index.html">
        <x-icon v-if="this.footerSelect!='my'" slot="icon" type="ios-person-outline" size="26" class="xicon_link"></x-icon>
        <x-icon v-if="this.footerSelect=='my'" slot="icon" type="ios-person" size="26" class="xicon_active"></x-icon>
        <span slot="label">我的</span>
      </tabbar-item>
  </tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'

export default {
  name: 'SCFooter',
  props: ['routeName'],
  components: {
    Tabbar,
    TabbarItem,
  },
  data(){
    return{
      title: '路路顺车',
      st: false,
    }
  },
  computed: {
    footerSelect: function () {
      return this.$route.name;
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.selected .weui-tabbar__icon .vux-x-icon{fill: #09bb07 !important; }
.selected .weui-tabbar__label span{color: #09bb07 !important; }
.unselect .xicon_active {fill: #999 !important; }
.unselect .weui-tabbar__label span{color: #999 !important; }
.xicon_link{
  fill:#999;
}
.xicon_active{
  fill:#09bb07;
}
</style>
